<template>
    <div class="content">
        <div class="form">
            <zx-form-group :title="$t('CURRENCY')" class="boxShadow">
                <zx-select :place="$t('CURRENCY_PLACE')" v-model="asssetForm.coinType" ref='coinType' :rules="rules.coinType">
                    <zx-option :value="item.coinType" v-for="(item,key) of balanList" :key='key'>{{item.coinCore}}</zx-option>
                </zx-select>
            </zx-form-group>
            <zx-form-group :title="coinName+' '+$t('PRESENT_ADDRESS')">
                <zx-input type="text" v-model="asssetForm.address" :place="$t('PRESENT_ADDRESS_PLACE')" ref='address' :rules="rules.address"></zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('SERVER_CHARGE')" class="boxShadow">
                <zx-select :place="$t('SERVER_CHARGE_PLACE')" v-model="asssetForm.fee" ref='fee' :rules="rules.fee">
                    <zx-option :value="item.feeGrade" v-for="(item,key) of ficWithFeeList" :key='key' @click="checkValue(item)">{{item.feeValue*100|Fixed(4)}}%</zx-option>
                </zx-select>
            </zx-form-group>
            <zx-form-group :title="$t('PRESENT_QUANTITY')">
                <zx-input type="text" v-model="asssetForm.trueNum" :place="$t('PRESENT_QUANTITY_PLACE')" ref='trueNum' :rules="rules.trueNum">
                    <span slot="text" class="post-text">{{coinName}}</span>
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('NOTE_INFO')">
                <zx-input type="textarea" v-model="asssetForm.remark" :place="$t('NOTE_INFO_PLACE')" ref='remark' :rules="rules.remark">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('USER_TRADE_PASS')">
                <zx-input type="password" v-model="asssetForm.dealPwd" :place="$t('USER_TRADE_PASS_PLACE')" ref='dealPwd' :rules="rules.dealPwd">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('ACTUAL_ACCOUNT')">
                <zx-input type="text" v-model="val1" place="" disabled>
                    <span slot="text" class="post-text">{{coinName}}</span>
                </zx-input>
            </zx-form-group>
            <zx-form-group>
                <input type="button" class="submit-btn mt-20 green-btn mb-20 radius" :value="$t('CONFIRMATION')" @click="submitForm('asssetForm')">
            </zx-form-group>
        </div>
    </div>
</template>
<script>
    import { Form, Func, Auth, Rules } from '@/providers';
    import { Asset } from '@/services';
    export default {
        data() {
            return {
                values: '',
                inputValue: '',
                val: '0%',
                val1: '0.0000',
                balanList: [],
                ficWithFeeList: [],
                asssetForm: {
                    coinType: '',
                    address: '',
                    fee: '',
                    trueNum: '',
                    remark: '',
                    dealPwd: ''
                },
                coinName: '',
                rules: Rules,
                procesValue: 0
            };
        },
        methods: {
            checkValue(item) {
                this.procesValue = item.feeValue;
                this.val1 = (this.asssetForm.trueNum * (1 - item.feeValue)).toFixed(4);
            },
            getData() {
                this.GetBalanByUserNo();
                this.GetFicWithFee();
            },
            // 获取手续费
            async GetFicWithFee() {
                this.asssetForm.fee = '';
                try {
                    let res = await Asset.GetFicWithFee({
                        coinType: this.asssetForm.coinType,
                        flag: 0,
                        token: sessionStorage.getItem('token')
                    });
                    this.ficWithFeeList = res.data;
                } catch (error) {
                    console.log(error);
                }
            },
            async GetBalanByUserNo() {
                try {
                    let res = await Asset.GetBalanByUserNo({
                        userNo: Auth.getItem('userId'),
                        hide: '0',
                        token: Auth.getItem('token')
                    });
                    this.balanList = res.data;
                } catch (error) {
                    console.log(error);
                }
            },
            async submitForm(formName) {
                if (!Form.validataForm(this, formName)) {
                    return false;
                }
                let _parmas = this[formName];
                try {
                    let res = await Asset.DetermineWithdraw({
                        address: _parmas.address,
                        dealPwd: Func.PasswordEncrypt(_parmas.dealPwd),
                        trueNum: _parmas.trueNum,
                        remark: _parmas.remark,
                        fee: _parmas.fee,
                        coinType: _parmas.coinType,
                        userNo: Auth.getItem('userId'),
                        token: Auth.getItem('token')
                    });
                    console.log(res);
                    Form.Totas(res.desc, () => {
                        this.$router.push('/asset');
                    });
                } catch (error) {
                    console.log(error);
                }
            }
        },
        watch: {
            'asssetForm.coinType'(val) {
                this.procesValue = 0;
                this.val1 = '0.0000';
                let _list = this.balanList;
                if (!_list.length) { return false; }
                for (let item of _list) {
                    if (val == item.coinType) {
                        this.coinName = item.coinName;
                    }
                }
                this.GetFicWithFee();
            },
            'asssetForm.trueNum'(value) {
                this.val1 = value * (1 - this.procesValue);
                this.val1 = this.val1.toFixed(4);
            },
            balanList(list) {
                let _coinType = this.asssetForm.coinType;
                for (let item of list) {
                    if (_coinType == item.coinType) {
                        this.coinName = item.coinName;
                    }
                }
            }
        },
        created() {
            this.asssetForm.coinType = this.$route.query.coinType;
            this.getData();
        }
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/sass/asset.scss";
    .post-text {
        position: absolute;
        right: 1rem;
        font-size: 1.4rem;
        color: RGBA(1, 157, 250, 1);
    }
</style>